<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { Map, View } from 'ol'
import Tile from 'ol/layer/Tile'
import { OSM, BingMaps } from 'ol/source'
import 'ol/ol.css'
import NavigatorRoot from "../components/NavigatorRoot.vue";
import UserIconSvg from "../svg/userIconSvg.vue";
import MapComponent from "../components/MapComponent.vue";
import HeaderTitle from "../components/HeaderTitle.vue";
import router from "../Router";
import {currentPoints, TaskForm, taskImage} from "../store/taskStore.ts";
import {assignTask, getTaskById, updateTask} from "../network/taskApi.ts";
import html2canvas from "html2canvas";
import {useRoute} from "vue-router";
import {currentRoleIndex, navigatorDict} from "../utils/UserUtils.ts";


const route  = useRoute()
let taskForm = reactive<TaskForm>({})
let taskId = {id: Number(localStorage.getItem("modifyTaskId"))}


function toModifyTaskBase(){
  router.push("/modifyTaskBase")
}

onMounted(async ()=>{
  let timer = setTimeout(alarmClickMap,1850)
  await getTaskById(taskId).then(res=> {
    if(res.data.code == 0) {
      // console.log(res.data.data)
      for (let taskFormKey in res.data.data) {
        taskForm[taskFormKey] = res.data.data[taskFormKey]
      }
    }
  })
})
function alarmClickMap(){
  alert("请点击地图进行相应操作。")
}
function toShowTask(){
  //如果等于123，那就是默认区域。否则就是有值，直接做另一步就行
  if(taskForm.mapCode == "123"){
    alert("请选择地图区域")
  }else{
    alert("调查区域选择成功，完成任务创建")
    router.push("/showTask")
    //这里需要注意，如果用户没重新选择区域，选用的是上次的截图。那么这里就会截一张空图替换。
    //那显然是不可取的。所以建议在地图组件的 绘制区域 那里做个信号传过来，告诉他是否应该截图。
    //需要 子组件 传给他这个 父组件
  }
}

function getDrawChangeSign(sign){
  if(sign){
    getTaskById(taskId).then(res=> {
      if(res.data.code == 0) {
        // console.log(res.data.data)
        for (let taskFormKey in res.data.data) {
          taskForm[taskFormKey] = res.data.data[taskFormKey]
        }
        console.log("getDrawChangeSign:")
        console.log(taskForm)
      }
    })
  }
}

console.log("localStorage.getItem(\"currentRoleIndex\"):",localStorage.getItem("currentRoleIndex"))
currentRoleIndex.value = localStorage.getItem("currentRoleIndex") ? localStorage.getItem("currentRoleIndex") : 5
</script>
<template>
<div class="flex flex-col h-full w-full fixed top-0 right-0  bg-gray-2 gap-2 " >
  <header-title></header-title>
  <div class="flex grow gap-2">
    <component :is="navigatorDict[currentRoleIndex]" class="w-38"></component>

    <div class="flex ml-40 bg-white grow h-full">
      <div class=" flex flex-col grow ">
        <div class="flex justify-start items-center gap-3 h-12 ml-5">
          <div class="border-#84b9bf rounded-full border-1 border-solid w-5 h-5"></div>
          <div class="flex justify-center items-center text-5 text-bold">修改调查区域</div>
        </div>
        <map-component class="grow" id="map-component"
                       :taskId="taskId.id!"
                       @draw-change-sign="getDrawChangeSign"
        ></map-component>
      </div>
      <el-scrollbar height="600px" style="margin-top: 55px">
        <div class="bg-white w-80 flex flex-col justify-center items-center gap-2">
          <template v-for="(value,key) in taskForm">
            <el-card style="width:280px" shadow="always">
              {{key}}:{{value}}
              <img v-show="key=='mapCode'" :src=value>
            </el-card>
          </template>
        </div>
      </el-scrollbar>

    </div>
  </div>
  <div class="fixed bottom-1 right-1 flex">
    <div class="flex justify-center items-center" @click="toModifyTaskBase"><button>上一步</button></div>
    <div class="flex justify-center items-center" @click="toShowTask"><button>修改完成</button></div>
  </div>

</div>

</template>

<style scoped>

</style>